<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            sayHello() {
                console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
            }
        }

        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age);
                this.grade = grade;
            }
            study() {
                console.log(`${this.name} is studying at grade ${this.grade}.`);
            }
        }

        class Teacher extends Person {
            constructor(name, age, subject) {
                super(name, age);
                this.subject = subject;
            }
            teach() {
                console.log(`${this.name} is teaching ${this.subject}.`);
            }
        }

        let person = new Person('John', 30);
        person.sayHello();
        console.log('');
        let student = new Student('Jane', 25, 12);
        student.sayHello();
        student.study();
        console.log('');
        let teacher = new Teacher('Mike', 40, 'Math');
        teacher.sayHello();
        teacher.teach();
        console.log('');
    </script>
</head>
<body>
    
</body>
</html>